<!--  -->
<template>
  <div>
   <el-input v-model="searchText" placeholder="请输入教师id">
    <template #append>
        <el-button circle
                   type="danger"
                   @click="handleSearch(searchText)">
          <el-icon>
            <Search />
          </el-icon>
        </el-button>
      </template>
  </el-input>  
   
   </div>
     <div class="adcate-tools">
            <el-button type="warning" @click="toAdd">添加</el-button>
        </div>
  <div>
    <el-table :data="filteredData" style="width: 100%">
    <el-table-column fixed prop="createTime" label="创建时间"  />
    <el-table-column prop="depart" label="学院"  />
    <el-table-column prop="id" label="id"  />
    <el-table-column prop="professional" label="职称"  /> 
    <el-table-column prop="school" label="学校"  />
    <el-table-column prop="teacherName" label="姓名"  />
    <el-table-column prop="teacherNo" label="工号"  />
    <el-table-column prop="updateTime" label=" 更新时间"  />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
       <el-button link type="primary" size="small" @click="toEdit(scope.row)"
          >更新</el-button>
        <el-button link type="primary" size="small"  @click="todel(scope.row.id)">删除</el-button>

      </template>
    </el-table-column>
  </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="allteacher.length"
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  
  </div>
  <el-dialog v-model="dialogVisibles" title="删除" width="30%" >
 <span>是否确定删除？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibles = false">取消</el-button>
        <el-button type="primary" @click="del(ID)">
          确定
        </el-button>
      </span>
    </template>
</el-dialog>
<el-dialog v-model="dialogVisible"  title="教师信息添加" >
        <el-form :model="teacher">
            <el-form-item label="创建时间" :label-width="formLabelWidth" >
                <el-input v-model="teacher.createTime" autocomplete="off" />
            </el-form-item>
            <el-form-item label="学院" :label-width="formLabelWidth" >
                <el-input v-model="teacher.depart" autocomplete="off" />
            </el-form-item>
            <el-form-item label="id" :label-width="formLabelWidth" >
                <el-input v-model="teacher.id" autocomplete="off" />
            </el-form-item>
            <el-form-item label="职称" :label-width="formLabelWidth" >
                <el-input v-model="teacher.professional" autocomplete="off" />
            </el-form-item>
            <el-form-item label="学校" :label-width="formLabelWidth" >
                <el-input v-model="teacher.school" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" >
                <el-input v-model="teacher.teacherName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="工号" :label-width="formLabelWidth" >
                <el-input v-model="teacher.teacherNo" autocomplete="off" />
            </el-form-item>
            <el-form-item label="更新时间" :label-width="formLabelWidth" >
                <el-input v-model="teacher.updateTime" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { defineComponent } from "vue"
import { allteacherpage,teacherdel,addteacher,editteacher,teacherone} from "../../http/teacher"
import {cloneDeep} from 'lodash-es'
export default defineComponent({
    data(){
    return {
       allteacher: [],
       currentPage: 1,
       pageSize: 5,
        dialogVisible: false,
        dialogVisibles: false,
        ID:"",
       teacher: {
                "createTime": "",
                "depart": "",
                "id": 0,//标志点 0添加 >0 更新
                "professional": "",
                "school": "",
                "teacherName": "",
                "teacherNo": "",
                "updateTime": "",

            },
            formLabelWidth: 80,
            flag: true,
            searchText: ''  ,
         
    }
  },
  mounted(){
    this.getallteacherpage()
  },
  computed: {
    startIndex() {
      return (this.currentPage - 1) * this.pageSize;
    },
    endIndex() {
      return this.currentPage * this.pageSize;
    },
    filteredData(){
      // if (this.searchText) {
      //   return this.allteacher.filter(item => {
      //     return String(item.id).includes(String(this.searchText));
      //   });
      // } 
      if (this.searchText) {
        // 使用 Array.prototype.filter() 方法过滤数据
        return this.allteacher.filter(item => {
          item.id == this.searchText
          return item.id == this.searchText;
         
        });
    

      }
      else {
        // 如果搜索条件为空，返回原始数据源
      return this.allteacher.slice((this.currentPage-1)*this.pageSize, this.currentPage*this.pageSize)
      }
      
    },
  
},
  methods: {
    handleSearch (id) {
      const params = {
                id: id
            }
      teacherone(params).then(res => {
        ElMessage(res.msg)
            // const all=res.data.teacher
            // this.allteacher.push(all);
            console.log(res)
          })
          .catch(err => {
            ElMessage(res.msg)
            console.log(err)
          });
    },
    handleSizeChange(val) {
      // 每页显示数改变时执行的方法
      this.pageSize = val;
      
      // 修改当前页码，重新渲染表格数据
      this.currentPage = 1;
    },

    handleCurrentChange(val) {
      // 当前页码改变时执行的方法
      this.currentPage = val;
    },
    toEdit(teacher){
      // console.log(teacher)
      this.dialogVisible=true;
      this.flag=false;
      this.teacher=cloneDeep(teacher); 
    },
    todel(id){
      console.log(id)
      this.dialogVisibles = true;
      const pd=id
      this.ID=pd
    },
    del(id){
    const params = {
                id: id
            }
            teacherdel(params).then(res => {
                if (res.success) {
                  this.dialogVisibles=false;
                  ElMessage(res.msg)
                  this.$router.go(0);
                  console.log("删除成功！")

                }
                else {
                  ElMessage(res.msg)
                    console.log(res.msg)
                    return false
                }


            }).catch(err => {

            })
          },
    toAdd() {
            //到添加的页面
            this.dialogVisible = true;
            this.teacher= {
                "createTime": "",
                "depart": "",
                "id": 0,//标志点 0添加 >0 更新
                "professional": "",
                "school": "",
                "teacherName": "",
                "teacherNo": "",
                "updateTime": "",

            }
            this.flag=true;
        },
    save() {
            const teacher = this.teacher;  
            if (this.flag) {
              // this.createTime= `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
              addteacher(teacher).then(res => {
                    if (res.success) {
                        this.dialogVisible = false;
                        this.$router.go(0);
                        ElMessage(res.msg)
                    }
                    else {
                        ElMessage(res.msg)
                        console.log(res)
                        return false
                    }
                }).catch(err => {
                    ElMessage('网络错误联系管理员')
                })
            }else{
                editteacher(teacher).then(res => {
                    if (res.success) {
                        this.dialogVisible = false;  
                        this.$router.go(0);
                        ElMessage(res.msg)
                    }
                    else {
                        ElMessage(res.msg)
                        console.log(res)
                        return false
                    }
                }).catch(err => {
                    ElMessage('网络错误联系管理员')
                })
            }

        },
    getallteacherpage(){
    //    const data={
    //     currentPage:1,
    //     size:5
    //    }
    //    allteacherpage(data).then(res=>{
    //     console.log(res);
    //     this.allteacher=res.data.teachers;
    //     this.page = page;
    //    }).catch(err=>{
    //      console.log(err);
    //    })
    // }
    allteacherpage().then(res=>{
        console.log(res);
        this.allteacher=res.data.teachers;
       }).catch(err=>{
         console.log(err);
       })
    }

  }
  });
</script>
<style lang='scss' scoped>
.round-btn {
  border-radius: 50%;
  padding-left: 14px;
  padding-right: 14px;
}
</style>